<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>weather.js</title>

    <style>
        .column {
            float: left;
            width: 50%;
        }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        .container {
            margin: auto;
        }

        /* Small Screen (Phone/Tablet) 768px-991px */
        @media (min-width: 768px) {
            .container {
                width: 750px;
            }
        }

        /* Desktop Screen (Medium Resolution) 992px-1199px */
        @media (min-width: 992px) {
            .container {
                width: 970px;
            }
        }

        /* Desktop Screen (Large Resolution) Greater Than 1200px */
        @media (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Guntersville, AL</h1>
        <div class="row">
            <div class="column">
                <h2>Current Conditions</h2>
                <p id="current"></p>
            </div>
            <div class="column">
                <h2>Forecast</h2>
                <p id="forecast"></p>
            </div>
        </div>
    </div>

    <script src="../dist/weather.min.js"></script>
    <script>
        var apiKey = "12345"; // your api key goes here
        Weather.setApiKey( apiKey );

        Weather.getCurrent( "Guntersville", function ( current ) {
            document.querySelector( '#current' ).innerHTML = "<b>Temperature:</b> " + Math.round( current.temperature() ) + " &deg;K or " +
                Math.round( Weather.kelvinToFahrenheit( current.temperature() ) ) + " &deg;F or " +
                Math.round( Weather.kelvinToCelsius( current.temperature() ) ) + " &deg;C" +
                "<br /><b>Current Conditions:</b> " + current.conditions();
        } );

        Weather.getForecast( "Guntersville", function ( forecast ) {
            document.querySelector( "#forecast" ).innerHTML = "<b>High:</b> " + Math.round( forecast.high() ) + " &deg;K or " +
                Math.round( Weather.kelvinToFahrenheit( forecast.high() ) ) + " &deg;F or " +
                Math.round( Weather.kelvinToCelsius( forecast.high() ) ) + " &deg;C<br /><b>Low:</b> " + Math.round( forecast.low() ) + " &deg;K or " +
                Math.round( Weather.kelvinToFahrenheit( forecast.low() ) ) + " &deg;F or " +
                Math.round( Weather.kelvinToCelsius( forecast.low() ) ) + " &deg;C";
        } );
    </script>
</body>

</html>